<template>
  <el-dialog
    title="区域详情"
    :visible="dialogTableVisible"
    @open="openFn"
    @close="closeFn"
    style="text-align: left"
  >
    <el-form
      label-width="140px"
      :model="form"
    >
      <el-form-item label="区域名称" style="width: 396px"> </el-form-item>
      <el-form-item label="包含点位">
        <el-table
          :header-cell-style="{
            background: '#f4f6fa',
            color: '#666666',
            height: '44px',
          }"
    :data="form.formLabelAlign"
    style="width:396px"
        >
          <el-table-column
            label="序号"
            width="80"
            type="index"
          ></el-table-column>
          <el-table-column
            property="name"
            label="点位名称"
            width="158"
          />
          <el-table-column label="设备数量" width="158"  property="nodeCount" >
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// import { detailAreaList } from '@/api/point'
import { getNowTime } from '@/views/Point/index'
export default {
  props: {
    dialogTableVisible: Boolean,
    DetailObj: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      DetailList: [],
      form: {
        formLabelAlign: []
      }

    }
  },
  created () {

  },
  methods: {
    closeFn () {
      this.$emit('update:dialogTableVisible', false)
    },
    openFn () {
      this.form.formLabelAlign.push(this.DetailObj)
      console.log(this.form.formLabelAlign)
    }
  },
  filters: {
    getNowTime
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  width: 630px;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  border-radius: 15px;
//   height:300 px;
}
/deep/ .el-dialog__body {
  padding: 0px 20px 20px 20px;
}
</style>
